<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册界面</title>
    <style>
        body{
            background-image: url(static/picture/regist.jpg);
            background-size: 100%;
            background-attachment: fixed;
            opacity: 0.6;
        }
        .container{
            margin: 0 auto;
            width: 500px;
        }
        form{
            width: 450px;
            margin: 0 auto;
            background: #FFF;
            border-radius: 15px;
            position: relative;
        }
        h1{
            font-size: 28px;
            text-align: center;
            color: #FFF;
        }
        .p{
            color: red;
            margin-left: 33px;
            display: inline-block;//不占单独一行的块级元素
        }
        label{
            font-size: 18px;
            font-weight: bold;
        }
        .register{
            height: 35px;
            width: 300px;
        }
        .q{
            color:red;
            margin-left:17px;
            display:inline-block;
        }
        .checkbox{
            margin-left: 100px;
            display: inline-block;
            width: 15px;
            height: 15px;
        }
        .submit{
            border-radius: 7px;
            margin-left: 150px;
            height: 35px;
            width: 150px;
            background-color: #000;
            border: none;
            display: block;
            padding: 0;
            color: #FFF;
            font-weight: bold;
            cursor: pointer;
        }
        a{
            text-decoration: none;
            font-weight: bold;
        }
        .left,.right{
            position: absolute;
            bottom: 20px;
        }
        .left{
            left: 20px;
        }
        .right{
            right: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>新用户注册</h1>
    <form method="post" action="/user-info/regist">
        <br>
        <span class="p">*</span>
        <label for="username">用户名</label>
        <input type="text" name="userName" id="username" placeholder="" class="register"><br><br>
        <span class="p">*</span>
        <label for="phonenumber">手机号</label>
        <input type="text" name="userPhone" id="phonenumber" class="register">
        <br><br>
        <span class="q">*</span>
        <label for="pwd">登录密码</label>
        <input type="password" name="userPwd" id="pwd" class="register"><br><br>
        <span class="q">*</span>
        <label for="c_pwd">确认密码</label>
        <input type="password" name="userPwdAgain" id="c_pwd" class="register"><br><br>
        <span class="p">*</span>
        <label for="verify">性别</label>
        <input type="text" id="verify" class="register" name="userSex"><br><br>
        <input type="checkbox" class="checkbox" name="">
        <span style="font-size:15px">我已阅读并同意《用户注册协议》</span>
        <br><br>
        <input type="submit" name="" value="同意以上协议并注册" class="submit" onclick="register(this)"><br>
        <a href="index.html" class="left">返回首页</a>
        <a href="login.html" class="right">登录</a>
    </form>
</div>
<script>
    var checkbox=document.getElementsByClassName('checkbox');
    function register(btn){
        if(checkbox[0].checked==true){
            alert("注册成功！");
        }
        else{
            alert("请先阅读并同意《用户注册协议》！")
        }
    }
</script>
</body>
</html>